<template>
  <div class="spaceDetail">
    <!-- 查看空间详情 -->
    <div class="infoBox">
      <div class="header">
        <div class="logo">
          <img src="" alt="">
        </div>
        <div class="spaceTitle">大乐之夜</div>
        <span>创建时间：</span>
      </div>
      <div class="content">
        <div>空间类型<span>建筑风格</span><span>空间特色</span></div>
        <div>空间标题</div>
        <div>空间简介</div>
        <div class="btn1">
          <el-button type="text" @click="seeSpaceImg">查看空间图片↓</el-button>
        </div>
        <div class="spaceImg" v-show="isShow">
          <ul>
            <li v-for="item in ImgData" :key="item"><img v-bind:src="item.src" alt=""></li>
          </ul>
        </div>
        <div class="btn2">
          <el-button type="text" @click="seeSpaceImg">收起</el-button>
        </div>
        
      </div>
    </div>
    <div class="priceBox">
      <div class="head">价格信息</div>
      <div class="content">
        <div class="stage">
          <span class="stageTitle">全天拍摄：</span>
          <div class="usualPrice">
            <span class="title">平时价格</span>
            <div>公共区域：</div>
            <div>房间幽夜：</div>
            <div>人数限制：<span>允许进场器材：</span></div>
            
          </div>
          <div class="usualPrice">
            <span class="title">周末节假日价格</span>
            <div>公共区域：</div>
            <div>房间幽夜：</div>
            <div>人数限制：<span>允许进场器材：</span></div>
          </div>
        </div>
        <div class="stage">
          <span class="stageTitle">上半天拍摄：</span>
          <div class="usualPrice">
            <span class="title">平时价格</span>
            <div>公共区域：</div>
            <div>房间幽夜：</div>
            <div>人数限制：<span>允许进场器材：</span></div>
          </div>
          <div class="usualPrice">
            <span class="title">周末节假日价格</span>
            <div>公共区域：</div>
            <div>房间幽夜：</div>
            <div>人数限制：<span>允许进场器材：</span></div>
          </div>
        </div>
        <div class="stage">
          <span class="stageTitle">下半天拍摄：</span>
          <div class="usualPrice">
            <span class="title">平时价格</span>
            <div>公共区域：</div>
            <div>房间幽夜：</div>
            <div>人数限制：<span>允许进场器材：</span></div>
          </div>
          <div class="usualPrice">
            <span class="title">周末节假日价格</span>
            <div>公共区域：</div>
            <div>房间幽夜：</div>
            <div>人数限制：<span>允许进场器材：</span></div>

          </div>
        </div>  
      </div>
    </div>
    <div class="priceBox">
      <div class="head">配套设施</div>
      <div class="content" style="padding-bottom:20px">
        <div class="facil">提前入住：(方寸平台价格)  (门店价格)</div>
        <div class="facil">工作午餐：(方寸平台价格)  (门店价格)</div>
        <div class="facil">工作晚餐：(方寸平台价格)  (门店价格)</div>
        <div class="facil">便利设施：</div>
        <div class="facil">拍摄须知：</div>
      </div>
    </div>
    <div class="priceBox">
      <div class="head">评论列表</div>
      <div class="content" style="margin-top:20px">
        <el-table :data="userData" style="width: 98%;margin-left:1%" empty-text="没有评论信息">
          <el-table-column prop="id" label="用户昵称" min-width="120" align="center">
          </el-table-column>
          <el-table-column prop="id" label="星级" min-width="120" align="center">
          </el-table-column>
          <el-table-column prop="id" label="评论内容" min-width="520" align="center">
          </el-table-column>
          <el-table-column prop="id" label="操作时间" min-width="120" align="center">
          </el-table-column>
        </el-table>
        <div class="btn">
          <el-button type="primary" @click="dialogTableVisible = true">查看更多</el-button>
        </div>
        
      </div>
      <el-dialog title="评论列表" :visible.sync="dialogTableVisible">
        <el-table :data="userData" style="width: 100%" empty-text="没有评论信息">
          <el-table-column prop="id" label="用户昵称" min-width="120" align="center">
          </el-table-column>
          <el-table-column prop="id" label="星级" min-width="120" align="center">
          </el-table-column>
          <el-table-column prop="id" label="评论内容" min-width="520" align="center">
          </el-table-column>
          <el-table-column prop="id" label="操作时间" min-width="120" align="center">
          </el-table-column>
        </el-table>
        <div class="pageContainer">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="this.pageSizeArray" :page-size="this.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="this.total">
          </el-pagination>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'spaceDetail',
  data() {
    return {
      dialogTableVisible: false
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/variable'
.spaceDetail
  // background #fff
  .infoBox
    width 100%
    padding-left 30px
    background #fff
    // display flex
    // flex-flow row wrap
    .header
      height 50px
      padding-top 20px
      position relative
      .logo
        width 50px
        height 50px
        background #123
        border-radius 10px
      .spaceTitle
        position absolute
        font-size 20px
        left 70px
        top 34px
      span
        position absolute
        font-size 14px
        right 200px
        top 34px
    .content
      margin-top 50px
      div
        margin-top 20px
        span
          margin-left 500px
      .btn1
        margin-left 40%
      .btn2
        margin-left 95%   
  .priceBox
    margin-left 30px
    margin-right 30px
    background #fff
    margin-top 30px
    .head
      // padding 20px 16px 16px
      height 55px
      border-bottom 1px solid #F2F6FC
      padding 0 24px
      font-size 16px
      line-height 50px
    .content
      // padding-bottom 20px
      .stage
        border-bottom 2px solid #F2F6FC
        padding-bottom 20px
        .stageTitle
          height 40px
          margin-top 10px
          font-size 14px
          padding 0 24px
          line-height 40px
        .usualPrice
          padding 0 24px
          .title
            height 30px
            width 100%
            margin-top 10px
            font-size 14px
            line-height 30px
            font-weight bold
          div
            line-height 22px
            span
              margin-left 50px
      .facil
        line-height 22px
        padding 0 24px
        margin-top 16px
      .btn
        margin-top 20px
        margin-left 47%
        margin-bottom 20px         
</style>
